<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <span>用户名 </span><input type="text" name="username" /><br />
    <span style="margin-right: 15px">密码 </span
    ><input type="text" name="password" />

    <div style="margin-top: 20px">
      <button style="margin-right: 20px">登录</button>
      <button @click="toRegister">注册</button>
    </div>
  </div>
</template>
 
<script>
export default {
  methods:{
    toRegister(){
      //全局路由对象。可以用来控制路由的路径，模式等等
      console.log(this.$router);
      //局部路由对象。一般用来获取路由传参的信息
      console.log(this.$route);
      this.$router.push({
        //用path会忽略params，使用params传值必须用name
        // path:'/register',
        path:'/register/despot',
        // name:'Register',
        //编程式导航传参，query形式无论式name还是path都不受影响
        // query:{
        //   username:'harry',
        // },
        //如果使用编程式导航，传参使用params方式，就一定要使用name来声明
        params:{
          username:'despot',
        },
      })
      //this.$router.push('/register/despot')
    }
  }
}
</script>

<style scoped>
</style>